<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form ref="queryForm" :model="mainQueryParam" size="small" :inline="true" @submit.native.prevent>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="openNewHostPage">新建</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="pageList" border @selection-change="handleSelectionChange">
      <el-table-column label="主机编号" prop="code" show-overflow-tooltip min-width="80"/>
      <el-table-column label="主机名" prop="name" show-overflow-tooltip/>
      <el-table-column label="主机类型" prop="hostTypeName" show-overflow-tooltip/>
      <el-table-column label="操作系统" prop="osType" show-overflow-tooltip/>
      <el-table-column label="机柜" prop="cabinetCode" show-overflow-tooltip/>
      <el-table-column label="宿主机" prop="hostName" show-overflow-tooltip/>
      <el-table-column label="主机IP" prop="hostIp" show-overflow-tooltip/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click.stop="openDeleteHostPage(scope.row)">
            删除
          </el-button>
          <el-button type="text" size="mini" @click.stop="openUpdateHostPage(scope.row)">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="pagination.total > 0" :total="pagination.total" :page.sync="pagination.page"
                :limit.sync="pagination.limit" @pagination="handleQuery"
    />
  </div>
</template>

<script>
export default {
  name: 'batchMessage',
  data() {
    return {
      fullscreenLoading: false,
      editorOption: {}, //编辑器配置项
      number: 0,
      curRow: {},
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ],
      // 遮罩层
      loading: true,
      pageList: [],
      pagination: {
        page: 1,
        limit: 10,
        total: 0
      }
    }
  }, async created() {

  },
  methods: {}
}
</script>

<style scoped>
.truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 100px; /* 3行行高的大约高度 */
  line-height: 10px; /* 这里的行高应与你的设计相匹配 */
}
</style>
